<template>
  <div class="order_page">
    <NavBar>
      <div class="el-icon-arrow-left" slot="left"  @click="onClickLeft"></div>
      <div class="center" slot="center">订单列表</div>
    </NavBar>

    <div class="merchant">
      <div class="cinema">
        <img src="http://elm.cangdu.org/img/183cb1612b4109208.jpg" alt="" />
        <div class="line">
          <h4 class="name">肉包子打狗</h4>
          <p class="price">2022-10-21 00:31</p>
          <p class="describe">商品描述：好吃</p>
        </div>
        <div class="pay">
          <p class="play">等待支付</p>
          <p class="money">￥450</p>
        </div>
      </div>

      <div class="pending">
        <p class="time">去支付(还剩{{ time }})</p>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from "../../components/NavBar.vue";
export default {
  data() {
    return {
      MyTime: 900000,
    };
  },
  created() {
    this.timer = setInterval(() => {
      this.MyTime -= 1000;
    }, 1000);
  },
  components: { NavBar },
  mounted() {},
  methods: {
    onClickLeft() {
      this.$router.back();
    },
  },

  computed: {
    time() {
      let date = new Date(this.MyTime);
      const m = Math.trunc(this.MyTime / 60 / 1000);
      const s = Math.trunc((this.MyTime / 1000) % 60);
      return m + " : " + s;
    },
  },
};
</script>

<style lang="scss" scoped>
.order_page {
  background-color: #f1f1f1;
  margin-bottom: 1.95rem;

  .merchant {
    margin-top: 40px;
    width: 100%;
    height: 183px;
    background-color: #fafafa;
    padding: 20px;
    box-sizing: border-box;
    border-bottom: 1px solid rgb(211, 211, 211);
    .cinema {
      display: flex;
      justify-content: space-between;
      position: relative;
      img {
        width: 90px;
        height: 90px;
      }
      .line {
        position: absolute;
        left: 111px;
        p {
          font-size: 12px;
        }
        h4 {
          font-size: 14px;
        }
        .describe {
          font-size: 15px;
          color: rgb(109, 109, 109);
        }
      }
      .pay {
        .play {
          font-size: 13px;
        }
        .money {
          margin-top: 56px;
          color: rgb(255, 140, 0);
          font-weight: 700;
          font-size: 17px;
        }
      }
    }
    .pending {
      width: 150px;
      height: 22px;
      border-radius: 3px;
      position: absolute;
      left: 205px;

      .time {
        font-size: 13px;
        text-align: center;
        color: rgb(255, 140, 0);
      }
    }
  }
}
</style>